
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title>IconFont</title>
    <link rel="stylesheet" href="demo.css">
    <link rel="stylesheet" href="iconfont.css">
</head>
<body>
    <div class="main markdown">
        <h1>IconFont 图标</h1>
        <ul class="icon_lists clear">
            
                <li>
                <i class="icon vip-icon vip-bankcard_icon"></i>
                    <div class="name">银行卡</div>
                    <div class="fontclass">.vip-bankcard_icon</div>
                </li>
            
                <li>
                <i class="icon vip-icon vip-bag_icon"></i>
                    <div class="name">包</div>
                    <div class="fontclass">.vip-bag_icon</div>
                </li>
            
                <li>
                <i class="icon vip-icon vip-address_icon"></i>
                    <div class="name">地址</div>
                    <div class="fontclass">.vip-address_icon</div>
                </li>
            
                <li>
                <i class="icon vip-icon vip-affirm_icon"></i>
                    <div class="name">确认</div>
                    <div class="fontclass">.vip-affirm_icon</div>
                </li>
            
                <li>
                <i class="icon vip-icon vip-add_icon"></i>
                    <div class="name">添加</div>
                    <div class="fontclass">.vip-add_icon</div>
                </li>
            
                <li>
                <i class="icon vip-icon vip-bar-chart_icon"></i>
                    <div class="name">条形图</div>
                    <div class="fontclass">.vip-bar-chart_icon</div>
                </li>
            
                <li>
                <i class="icon vip-icon vip-camera_icon"></i>
                    <div class="name">相机</div>
                    <div class="fontclass">.vip-camera_icon</div>
                </li>
            
                <li>
                <i class="icon vip-icon vip-cart_icon"></i>
                    <div class="name">购物车</div>
                    <div class="fontclass">.vip-cart_icon</div>
                </li>
            
                <li>
                <i class="icon vip-icon vip-classify_icon"></i>
                    <div class="name">分类</div>
                    <div class="fontclass">.vip-classify_icon</div>
                </li>
            
                <li>
                <i class="icon vip-icon vip-conversation_icon"></i>
                    <div class="name">聊天</div>
                    <div class="fontclass">.vip-conversation_icon</div>
                </li>
            
                <li>
                <i class="icon vip-icon vip-copy_icon"></i>
                    <div class="name">复制</div>
                    <div class="fontclass">.vip-copy_icon</div>
                </li>
            
                <li>
                <i class="icon vip-icon vip-edit_icon"></i>
                    <div class="name">编辑</div>
                    <div class="fontclass">.vip-edit_icon</div>
                </li>
            
                <li>
                <i class="icon vip-icon vip-dustbin_icon"></i>
                    <div class="name">删除</div>
                    <div class="fontclass">.vip-dustbin_icon</div>
                </li>
            
                <li>
                <i class="icon vip-icon vip-gift_icon"></i>
                    <div class="name">礼物</div>
                    <div class="fontclass">.vip-gift_icon</div>
                </li>
            
                <li>
                <i class="icon vip-icon vip-line-chart_icon"></i>
                    <div class="name">折线图</div>
                    <div class="fontclass">.vip-line-chart_icon</div>
                </li>
            
                <li>
                <i class="icon vip-icon vip-love_icon"></i>
                    <div class="name">喜欢</div>
                    <div class="fontclass">.vip-love_icon</div>
                </li>
            
                <li>
                <i class="icon vip-icon vip-more_icon"></i>
                    <div class="name">更多</div>
                    <div class="fontclass">.vip-more_icon</div>
                </li>
            
                <li>
                <i class="icon vip-icon vip-password_icon"></i>
                    <div class="name">密码</div>
                    <div class="fontclass">.vip-password_icon</div>
                </li>
            
                <li>
                <i class="icon vip-icon vip-phone_icon"></i>
                    <div class="name">手机</div>
                    <div class="fontclass">.vip-phone_icon</div>
                </li>
            
                <li>
                <i class="icon vip-icon vip-picture_icon"></i>
                    <div class="name">图片</div>
                    <div class="fontclass">.vip-picture_icon</div>
                </li>
            
                <li>
                <i class="icon vip-icon vip-pie-chart_icon"></i>
                    <div class="name">饼状图</div>
                    <div class="fontclass">.vip-pie-chart_icon</div>
                </li>
            
                <li>
                <i class="icon vip-icon vip-praise_icon"></i>
                    <div class="name">赞</div>
                    <div class="fontclass">.vip-praise_icon</div>
                </li>
            
                <li>
                <i class="icon vip-icon vip-reduce_icon"></i>
                    <div class="name">减少</div>
                    <div class="fontclass">.vip-reduce_icon</div>
                </li>
            
                <li>
                <i class="icon vip-icon vip-richscan_icon"></i>
                    <div class="name">扫一扫</div>
                    <div class="fontclass">.vip-richscan_icon</div>
                </li>
            
                <li>
                <i class="icon vip-icon vip-screen_icon"></i>
                    <div class="name">筛选</div>
                    <div class="fontclass">.vip-screen_icon</div>
                </li>
            
                <li>
                <i class="icon vip-icon vip-share_icon"></i>
                    <div class="name">分享</div>
                    <div class="fontclass">.vip-share_icon</div>
                </li>
            
                <li>
                <i class="icon vip-icon vip-text_icon"></i>
                    <div class="name">文本</div>
                    <div class="fontclass">.vip-text_icon</div>
                </li>
            
                <li>
                <i class="icon vip-icon vip-store_icon"></i>
                    <div class="name">商城</div>
                    <div class="fontclass">.vip-store_icon</div>
                </li>
            
                <li>
                <i class="icon vip-icon vip-time_icon"></i>
                    <div class="name">时间</div>
                    <div class="fontclass">.vip-time_icon</div>
                </li>
            
                <li>
                <i class="icon vip-icon vip-transmit_icon"></i>
                    <div class="name">转发</div>
                    <div class="fontclass">.vip-transmit_icon</div>
                </li>
            
                <li>
                <i class="icon vip-icon vip-wallet_icon"></i>
                    <div class="name">钱包</div>
                    <div class="fontclass">.vip-wallet_icon</div>
                </li>
            
                <li>
                <i class="icon vip-icon vip-wifi_icon"></i>
                    <div class="name">无线网</div>
                    <div class="fontclass">.vip-wifi_icon</div>
                </li>
            
                <li>
                <i class="icon vip-icon vip-folder_icon"></i>
                    <div class="name">文件夹</div>
                    <div class="fontclass">.vip-folder_icon</div>
                </li>
            
                <li>
                <i class="icon vip-icon vip-amplification_icon"></i>
                    <div class="name">放大</div>
                    <div class="fontclass">.vip-amplification_icon</div>
                </li>
            
                <li>
                <i class="icon vip-icon vip-calendar_icon"></i>
                    <div class="name">日历</div>
                    <div class="fontclass">.vip-calendar_icon</div>
                </li>
            
                <li>
                <i class="icon vip-icon vip-label_icon"></i>
                    <div class="name">标签</div>
                    <div class="fontclass">.vip-label_icon</div>
                </li>
            
                <li>
                <i class="icon vip-icon vip-linkman-contacts_ico"></i>
                    <div class="name">好友列表</div>
                    <div class="fontclass">.vip-linkman-contacts_ico</div>
                </li>
            
                <li>
                <i class="icon vip-icon vip-mute_icon"></i>
                    <div class="name">禁音</div>
                    <div class="fontclass">.vip-mute_icon</div>
                </li>
            
                <li>
                <i class="icon vip-icon vip-play_icon"></i>
                    <div class="name">播放</div>
                    <div class="fontclass">.vip-play_icon</div>
                </li>
            
                <li>
                <i class="icon vip-icon vip-service_icon"></i>
                    <div class="name">客服</div>
                    <div class="fontclass">.vip-service_icon</div>
                </li>
            
                <li>
                <i class="icon vip-icon vip-refresh_icon"></i>
                    <div class="name">刷新</div>
                    <div class="fontclass">.vip-refresh_icon</div>
                </li>
            
                <li>
                <i class="icon vip-icon vip-order_icon"></i>
                    <div class="name">订单</div>
                    <div class="fontclass">.vip-order_icon</div>
                </li>
            
                <li>
                <i class="icon vip-icon vip-red-packet_icon"></i>
                    <div class="name">红包</div>
                    <div class="fontclass">.vip-red-packet_icon</div>
                </li>
            
                <li>
                <i class="icon vip-icon vip-news_icon"></i>
                    <div class="name">新闻</div>
                    <div class="fontclass">.vip-news_icon</div>
                </li>
            
                <li>
                <i class="icon vip-icon vip-shrink_icon"></i>
                    <div class="name">缩小</div>
                    <div class="fontclass">.vip-shrink_icon</div>
                </li>
            
                <li>
                <i class="icon vip-icon vip-stick_icon"></i>
                    <div class="name">置顶</div>
                    <div class="fontclass">.vip-stick_icon</div>
                </li>
            
                <li>
                <i class="icon vip-icon vip-video_icon"></i>
                    <div class="name">录像</div>
                    <div class="fontclass">.vip-video_icon</div>
                </li>
            
                <li>
                <i class="icon vip-icon vip-sort_icon"></i>
                    <div class="name">排序</div>
                    <div class="fontclass">.vip-sort_icon</div>
                </li>
            
                <li>
                <i class="icon vip-icon vip-suspend_icon"></i>
                    <div class="name">暂停</div>
                    <div class="fontclass">.vip-suspend_icon</div>
                </li>
            
                <li>
                <i class="icon vip-icon vip-voice_icon"></i>
                    <div class="name">语音</div>
                    <div class="fontclass">.vip-voice_icon</div>
                </li>
            
                <li>
                <i class="icon vip-icon vip-volume_icon"></i>
                    <div class="name">声音</div>
                    <div class="fontclass">.vip-volume_icon</div>
                </li>
            
                <li>
                <i class="icon vip-icon vip-warning_icon"></i>
                    <div class="name">注意</div>
                    <div class="fontclass">.vip-warning_icon</div>
                </li>
            
                <li>
                <i class="icon vip-icon vip-activity_icon"></i>
                    <div class="name">活动</div>
                    <div class="fontclass">.vip-activity_icon</div>
                </li>
            
                <li>
                <i class="icon vip-icon vip-book_icon"></i>
                    <div class="name">书籍</div>
                    <div class="fontclass">.vip-book_icon</div>
                </li>
            
                <li>
                <i class="icon vip-icon vip-add-friends_icon"></i>
                    <div class="name">添加好友</div>
                    <div class="fontclass">.vip-add-friends_icon</div>
                </li>
            
                <li>
                <i class="icon vip-icon vip-download_icon"></i>
                    <div class="name">下载</div>
                    <div class="fontclass">.vip-download_icon</div>
                </li>
            
                <li>
                <i class="icon vip-icon vip-electricity_icon"></i>
                    <div class="name">电</div>
                    <div class="fontclass">.vip-electricity_icon</div>
                </li>
            
                <li>
                <i class="icon vip-icon vip-emoji_icon"></i>
                    <div class="name">表情</div>
                    <div class="fontclass">.vip-emoji_icon</div>
                </li>
            
                <li>
                <i class="icon vip-icon vip-female_icon"></i>
                    <div class="name">女</div>
                    <div class="fontclass">.vip-female_icon</div>
                </li>
            
                <li>
                <i class="icon vip-icon vip-live_icon"></i>
                    <div class="name">直播</div>
                    <div class="fontclass">.vip-live_icon</div>
                </li>
            
                <li>
                <i class="icon vip-icon vip-male_icon"></i>
                    <div class="name">男</div>
                    <div class="fontclass">.vip-male_icon</div>
                </li>
            
                <li>
                <i class="icon vip-icon vip-list_icon"></i>
                    <div class="name">列表</div>
                    <div class="fontclass">.vip-list_icon</div>
                </li>
            
                <li>
                <i class="icon vip-icon vip-search_icon"></i>
                    <div class="name">搜索</div>
                    <div class="fontclass">.vip-search_icon</div>
                </li>
            
                <li>
                <i class="icon vip-icon vip-keyboard_icon"></i>
                    <div class="name">键盘</div>
                    <div class="fontclass">.vip-keyboard_icon</div>
                </li>
            
                <li>
                <i class="icon vip-icon vip-member_icon"></i>
                    <div class="name">会员</div>
                    <div class="fontclass">.vip-member_icon</div>
                </li>
            
                <li>
                <i class="icon vip-icon vip-water_icon"></i>
                    <div class="name">水</div>
                    <div class="fontclass">.vip-water_icon</div>
                </li>
            
                <li>
                <i class="icon vip-icon vip-upload_icon"></i>
                    <div class="name">上传</div>
                    <div class="fontclass">.vip-upload_icon</div>
                </li>
            
                <li>
                <i class="icon vip-icon vip-computer_icon"></i>
                    <div class="name">电脑</div>
                    <div class="fontclass">.vip-computer_icon</div>
                </li>
            
                <li>
                <i class="icon vip-icon vip-e-mail_icon"></i>
                    <div class="name">邮件</div>
                    <div class="fontclass">.vip-e-mail_icon</div>
                </li>
            
                <li>
                <i class="icon vip-icon vip-education_icon"></i>
                    <div class="name">教育</div>
                    <div class="fontclass">.vip-education_icon</div>
                </li>
            
                <li>
                <i class="icon vip-icon vip-decoration_icon"></i>
                    <div class="name">奖章</div>
                    <div class="fontclass">.vip-decoration_icon</div>
                </li>
            
                <li>
                <i class="icon vip-icon vip-heavy-rain_icon"></i>
                    <div class="name">大雨</div>
                    <div class="fontclass">.vip-heavy-rain_icon</div>
                </li>
            
                <li>
                <i class="icon vip-icon vip-fine_icon"></i>
                    <div class="name">晴天</div>
                    <div class="fontclass">.vip-fine_icon</div>
                </li>
            
                <li>
                <i class="icon vip-icon vip-intense-fall_icon"></i>
                    <div class="name">暴雨</div>
                    <div class="fontclass">.vip-intense-fall_icon</div>
                </li>
            
                <li>
                <i class="icon vip-icon vip-heavy-snow_icon"></i>
                    <div class="name">大雪</div>
                    <div class="fontclass">.vip-heavy-snow_icon</div>
                </li>
            
                <li>
                <i class="icon vip-icon vip-membership-card_icon"></i>
                    <div class="name">会员卡</div>
                    <div class="fontclass">.vip-membership-card_icon</div>
                </li>
            
                <li>
                <i class="icon vip-icon vip-medal_icon"></i>
                    <div class="name">奖牌</div>
                    <div class="fontclass">.vip-medal_icon</div>
                </li>
            
                <li>
                <i class="icon vip-icon vip-moderate-rain_icon"></i>
                    <div class="name">中雨</div>
                    <div class="fontclass">.vip-moderate-rain_icon</div>
                </li>
            
                <li>
                <i class="icon vip-icon vip-pan_icon"></i>
                    <div class="name">铅笔</div>
                    <div class="fontclass">.vip-pan_icon</div>
                </li>
            
                <li>
                <i class="icon vip-icon vip-printer_icon"></i>
                    <div class="name">打印机</div>
                    <div class="fontclass">.vip-printer_icon</div>
                </li>
            
                <li>
                <i class="icon vip-icon vip-overcast-sky_icon"></i>
                    <div class="name">阴天</div>
                    <div class="fontclass">.vip-overcast-sky_icon</div>
                </li>
            
                <li>
                <i class="icon vip-icon vip-moderate-snow_icon"></i>
                    <div class="name">中雪</div>
                    <div class="fontclass">.vip-moderate-snow_icon</div>
                </li>
            
                <li>
                <i class="icon vip-icon vip-thermometer_icon"></i>
                    <div class="name">温度</div>
                    <div class="fontclass">.vip-thermometer_icon</div>
                </li>
            
                <li>
                <i class="icon vip-icon vip-spit_icon"></i>
                    <div class="name">小雨</div>
                    <div class="fontclass">.vip-spit_icon</div>
                </li>
            
                <li>
                <i class="icon vip-icon vip-thundershower_icon"></i>
                    <div class="name">雷阵雨</div>
                    <div class="fontclass">.vip-thundershower_icon</div>
                </li>
            
                <li>
                <i class="icon vip-icon vip-tool-cabinet_icon"></i>
                    <div class="name">工具箱</div>
                    <div class="fontclass">.vip-tool-cabinet_icon</div>
                </li>
            
                <li>
                <i class="icon vip-icon vip-trophy_icon"></i>
                    <div class="name">奖杯</div>
                    <div class="fontclass">.vip-trophy_icon</div>
                </li>
            
                <li>
                <i class="icon vip-icon vip-broken-sky_icon"></i>
                    <div class="name">多云</div>
                    <div class="fontclass">.vip-broken-sky_icon</div>
                </li>
            
                <li>
                <i class="icon vip-icon vip-airplane_icon"></i>
                    <div class="name">airplane_icon</div>
                    <div class="fontclass">.vip-airplane_icon</div>
                </li>
            
                <li>
                <i class="icon vip-icon vip-air_condition_icon"></i>
                    <div class="name">air_condition_icon</div>
                    <div class="fontclass">.vip-air_condition_icon</div>
                </li>
            
                <li>
                <i class="icon vip-icon vip-alarm_clock_icon"></i>
                    <div class="name">alarm_clock_icon</div>
                    <div class="fontclass">.vip-alarm_clock_icon</div>
                </li>
            
                <li>
                <i class="icon vip-icon vip-atm_icon"></i>
                    <div class="name">atm_icon</div>
                    <div class="fontclass">.vip-atm_icon</div>
                </li>
            
                <li>
                <i class="icon vip-icon vip-alarm_icon"></i>
                    <div class="name">alarm_icon</div>
                    <div class="fontclass">.vip-alarm_icon</div>
                </li>
            
                <li>
                <i class="icon vip-icon vip-bank_icon"></i>
                    <div class="name">bank_icon</div>
                    <div class="fontclass">.vip-bank_icon</div>
                </li>
            
                <li>
                <i class="icon vip-icon vip-balance_scale_icon"></i>
                    <div class="name">balance_scale_icon</div>
                    <div class="fontclass">.vip-balance_scale_icon</div>
                </li>
            
                <li>
                <i class="icon vip-icon vip-ban_barrage_icon"></i>
                    <div class="name">ban_barrage_icon</div>
                    <div class="fontclass">.vip-ban_barrage_icon</div>
                </li>
            
                <li>
                <i class="icon vip-icon vip-barrage_icon"></i>
                    <div class="name">barrage_icon</div>
                    <div class="fontclass">.vip-barrage_icon</div>
                </li>
            
                <li>
                <i class="icon vip-icon vip-batch_processing_ico"></i>
                    <div class="name">batch_processing_ico</div>
                    <div class="fontclass">.vip-batch_processing_ico</div>
                </li>
            
                <li>
                <i class="icon vip-icon vip-bath_towel_icon"></i>
                    <div class="name">bath_towel_icon</div>
                    <div class="fontclass">.vip-bath_towel_icon</div>
                </li>
            
                <li>
                <i class="icon vip-icon vip-beverage_icon"></i>
                    <div class="name">beverage_icon</div>
                    <div class="fontclass">.vip-beverage_icon</div>
                </li>
            
                <li>
                <i class="icon vip-icon vip-bedroom_icon"></i>
                    <div class="name">bedroom_icon</div>
                    <div class="fontclass">.vip-bedroom_icon</div>
                </li>
            
                <li>
                <i class="icon vip-icon vip-bike_icon"></i>
                    <div class="name">bike_icon</div>
                    <div class="fontclass">.vip-bike_icon</div>
                </li>
            
                <li>
                <i class="icon vip-icon vip-battery_charging_ico"></i>
                    <div class="name">battery_charging_ico</div>
                    <div class="fontclass">.vip-battery_charging_ico</div>
                </li>
            
                <li>
                <i class="icon vip-icon vip-bathroom_icon"></i>
                    <div class="name">bathroom_icon</div>
                    <div class="fontclass">.vip-bathroom_icon</div>
                </li>
            
                <li>
                <i class="icon vip-icon vip-capsule_icon"></i>
                    <div class="name">capsule_icon</div>
                    <div class="fontclass">.vip-capsule_icon</div>
                </li>
            
                <li>
                <i class="icon vip-icon vip-boat_icon"></i>
                    <div class="name">boat_icon</div>
                    <div class="fontclass">.vip-boat_icon</div>
                </li>
            
                <li>
                <i class="icon vip-icon vip-car_icon"></i>
                    <div class="name">car_icon</div>
                    <div class="fontclass">.vip-car_icon</div>
                </li>
            
                <li>
                <i class="icon vip-icon vip-category_find_icon"></i>
                    <div class="name">category_find_icon</div>
                    <div class="fontclass">.vip-category_find_icon</div>
                </li>
            
                <li>
                <i class="icon vip-icon vip-circulation_icon"></i>
                    <div class="name">circulation_icon</div>
                    <div class="fontclass">.vip-circulation_icon</div>
                </li>
            
                <li>
                <i class="icon vip-icon vip-cold_icon"></i>
                    <div class="name">cold_icon</div>
                    <div class="fontclass">.vip-cold_icon</div>
                </li>
            
                <li>
                <i class="icon vip-icon vip-code_icon"></i>
                    <div class="name">code_icon</div>
                    <div class="fontclass">.vip-code_icon</div>
                </li>
            
                <li>
                <i class="icon vip-icon vip-concentrate_icon"></i>
                    <div class="name">concentrate_icon</div>
                    <div class="fontclass">.vip-concentrate_icon</div>
                </li>
            
                <li>
                <i class="icon vip-icon vip-controller_icon"></i>
                    <div class="name">controller_icon</div>
                    <div class="fontclass">.vip-controller_icon</div>
                </li>
            
                <li>
                <i class="icon vip-icon vip-cup_icon"></i>
                    <div class="name">cup_icon</div>
                    <div class="fontclass">.vip-cup_icon</div>
                </li>
            
                <li>
                <i class="icon vip-icon vip-collect_icon"></i>
                    <div class="name">collect_icon</div>
                    <div class="fontclass">.vip-collect_icon</div>
                </li>
            
                <li>
                <i class="icon vip-icon vip-cpu_icon"></i>
                    <div class="name">cpu_icon</div>
                    <div class="fontclass">.vip-cpu_icon</div>
                </li>
            
                <li>
                <i class="icon vip-icon vip-droplight_icon"></i>
                    <div class="name">droplight_icon</div>
                    <div class="fontclass">.vip-droplight_icon</div>
                </li>
            
                <li>
                <i class="icon vip-icon vip-flashlight_icon"></i>
                    <div class="name">flashlight_icon</div>
                    <div class="fontclass">.vip-flashlight_icon</div>
                </li>
            
                <li>
                <i class="icon vip-icon vip-forbid_icon"></i>
                    <div class="name">forbid_icon</div>
                    <div class="fontclass">.vip-forbid_icon</div>
                </li>
            
                <li>
                <i class="icon vip-icon vip-game_icon"></i>
                    <div class="name">game_icon</div>
                    <div class="fontclass">.vip-game_icon</div>
                </li>
            
                <li>
                <i class="icon vip-icon vip-fruit_icon"></i>
                    <div class="name">fruit_icon</div>
                    <div class="fontclass">.vip-fruit_icon</div>
                </li>
            
                <li>
                <i class="icon vip-icon vip-fitness_icon"></i>
                    <div class="name">fitness_icon</div>
                    <div class="fontclass">.vip-fitness_icon</div>
                </li>
            
                <li>
                <i class="icon vip-icon vip-fire_hydrant_icon"></i>
                    <div class="name">fire_hydrant_icon</div>
                    <div class="fontclass">.vip-fire_hydrant_icon</div>
                </li>
            
                <li>
                <i class="icon vip-icon vip-government_icon"></i>
                    <div class="name">government_icon</div>
                    <div class="fontclass">.vip-government_icon</div>
                </li>
            
                <li>
                <i class="icon vip-icon vip-ice_box_icon"></i>
                    <div class="name">ice_box_icon</div>
                    <div class="fontclass">.vip-ice_box_icon</div>
                </li>
            
                <li>
                <i class="icon vip-icon vip-hotel_icon"></i>
                    <div class="name">hotel_icon</div>
                    <div class="fontclass">.vip-hotel_icon</div>
                </li>
            
                <li>
                <i class="icon vip-icon vip-integral_icon"></i>
                    <div class="name">integral_icon</div>
                    <div class="fontclass">.vip-integral_icon</div>
                </li>
            
                <li>
                <i class="icon vip-icon vip-law_icon"></i>
                    <div class="name">law_icon</div>
                    <div class="fontclass">.vip-law_icon</div>
                </li>
            
                <li>
                <i class="icon vip-icon vip-link_icon"></i>
                    <div class="name">link_icon</div>
                    <div class="fontclass">.vip-link_icon</div>
                </li>
            
                <li>
                <i class="icon vip-icon vip-loading_icon"></i>
                    <div class="name">loading_icon</div>
                    <div class="fontclass">.vip-loading_icon</div>
                </li>
            
                <li>
                <i class="icon vip-icon vip-menu_icon"></i>
                    <div class="name">menu_icon</div>
                    <div class="fontclass">.vip-menu_icon</div>
                </li>
            
                <li>
                <i class="icon vip-icon vip-map_icon"></i>
                    <div class="name">map_icon</div>
                    <div class="fontclass">.vip-map_icon</div>
                </li>
            
                <li>
                <i class="icon vip-icon vip-money_icon"></i>
                    <div class="name">money_icon</div>
                    <div class="fontclass">.vip-money_icon</div>
                </li>
            
                <li>
                <i class="icon vip-icon vip-network_icon"></i>
                    <div class="name">network_icon</div>
                    <div class="fontclass">.vip-network_icon</div>
                </li>
            
                <li>
                <i class="icon vip-icon vip-organization_icon"></i>
                    <div class="name">organization_icon</div>
                    <div class="fontclass">.vip-organization_icon</div>
                </li>
            
                <li>
                <i class="icon vip-icon vip-pet_icon"></i>
                    <div class="name">pet_icon</div>
                    <div class="fontclass">.vip-pet_icon</div>
                </li>
            
                <li>
                <i class="icon vip-icon vip-ppt_files_icon"></i>
                    <div class="name">ppt_files_icon</div>
                    <div class="fontclass">.vip-ppt_files_icon</div>
                </li>
            
                <li>
                <i class="icon vip-icon vip-qr_code_icon"></i>
                    <div class="name">qr_code_icon</div>
                    <div class="fontclass">.vip-qr_code_icon</div>
                </li>
            
                <li>
                <i class="icon vip-icon vip-plug_icon"></i>
                    <div class="name">plug_icon</div>
                    <div class="fontclass">.vip-plug_icon</div>
                </li>
            
                <li>
                <i class="icon vip-icon vip-repeal_icon"></i>
                    <div class="name">repeal_icon</div>
                    <div class="fontclass">.vip-repeal_icon</div>
                </li>
            
                <li>
                <i class="icon vip-icon vip-quit_icon"></i>
                    <div class="name">quit_icon</div>
                    <div class="fontclass">.vip-quit_icon</div>
                </li>
            
                <li>
                <i class="icon vip-icon vip-resource_icon"></i>
                    <div class="name">resource_icon</div>
                    <div class="fontclass">.vip-resource_icon</div>
                </li>
            
                <li>
                <i class="icon vip-icon vip-restaurant_icon"></i>
                    <div class="name">restaurant_icon</div>
                    <div class="fontclass">.vip-restaurant_icon</div>
                </li>
            
                <li>
                <i class="icon vip-icon vip-rule_icon"></i>
                    <div class="name">rule_icon</div>
                    <div class="fontclass">.vip-rule_icon</div>
                </li>
            
                <li>
                <i class="icon vip-icon vip-router_icon"></i>
                    <div class="name">router_icon</div>
                    <div class="fontclass">.vip-router_icon</div>
                </li>
            
                <li>
                <i class="icon vip-icon vip-rocket_icon"></i>
                    <div class="name">rocket_icon</div>
                    <div class="fontclass">.vip-rocket_icon</div>
                </li>
            
                <li>
                <i class="icon vip-icon vip-salary_icon"></i>
                    <div class="name">salary_icon</div>
                    <div class="fontclass">.vip-salary_icon</div>
                </li>
            
                <li>
                <i class="icon vip-icon vip-server_icon"></i>
                    <div class="name">server_icon</div>
                    <div class="fontclass">.vip-server_icon</div>
                </li>
            
                <li>
                <i class="icon vip-icon vip-sd_card_icon"></i>
                    <div class="name">sd_card_icon</div>
                    <div class="fontclass">.vip-sd_card_icon</div>
                </li>
            
                <li>
                <i class="icon vip-icon vip-show_icon"></i>
                    <div class="name">show_icon</div>
                    <div class="fontclass">.vip-show_icon</div>
                </li>
            
                <li>
                <i class="icon vip-icon vip-shield_icon"></i>
                    <div class="name">shield_icon</div>
                    <div class="fontclass">.vip-shield_icon</div>
                </li>
            
                <li>
                <i class="icon vip-icon vip-speed_icon"></i>
                    <div class="name">speed_icon</div>
                    <div class="fontclass">.vip-speed_icon</div>
                </li>
            
                <li>
                <i class="icon vip-icon vip-steamer_icon"></i>
                    <div class="name">steamer_icon</div>
                    <div class="fontclass">.vip-steamer_icon</div>
                </li>
            
                <li>
                <i class="icon vip-icon vip-tablet_computer_icon"></i>
                    <div class="name">tablet_computer_icon</div>
                    <div class="fontclass">.vip-tablet_computer_icon</div>
                </li>
            
                <li>
                <i class="icon vip-icon vip-tailor_icon"></i>
                    <div class="name">tailor_icon</div>
                    <div class="fontclass">.vip-tailor_icon</div>
                </li>
            
                <li>
                <i class="icon vip-icon vip-timer_icon"></i>
                    <div class="name">timer_icon</div>
                    <div class="fontclass">.vip-timer_icon</div>
                </li>
            
                <li>
                <i class="icon vip-icon vip-toy_icon"></i>
                    <div class="name">toy_icon</div>
                    <div class="fontclass">.vip-toy_icon</div>
                </li>
            
                <li>
                <i class="icon vip-icon vip-train_icon"></i>
                    <div class="name">train_icon</div>
                    <div class="fontclass">.vip-train_icon</div>
                </li>
            
                <li>
                <i class="icon vip-icon vip-transition_icon"></i>
                    <div class="name">transition_icon</div>
                    <div class="fontclass">.vip-transition_icon</div>
                </li>
            
                <li>
                <i class="icon vip-icon vip-translate_icon"></i>
                    <div class="name">translate_icon</div>
                    <div class="fontclass">.vip-translate_icon</div>
                </li>
            
                <li>
                <i class="icon vip-icon vip-tree_icon"></i>
                    <div class="name">tree_icon</div>
                    <div class="fontclass">.vip-tree_icon</div>
                </li>
            
                <li>
                <i class="icon vip-icon vip-tv_icon"></i>
                    <div class="name">tv_icon</div>
                    <div class="fontclass">.vip-tv_icon</div>
                </li>
            
                <li>
                <i class="icon vip-icon vip-u_disk_icon"></i>
                    <div class="name">u_disk_icon</div>
                    <div class="fontclass">.vip-u_disk_icon</div>
                </li>
            
                <li>
                <i class="icon vip-icon vip-umbrella_icon"></i>
                    <div class="name">umbrella_icon</div>
                    <div class="fontclass">.vip-umbrella_icon</div>
                </li>
            
                <li>
                <i class="icon vip-icon vip-wait_sending_icon"></i>
                    <div class="name">wait_sending_icon</div>
                    <div class="fontclass">.vip-wait_sending_icon</div>
                </li>
            
                <li>
                <i class="icon vip-icon vip-warehouse_icon"></i>
                    <div class="name">warehouse_icon</div>
                    <div class="fontclass">.vip-warehouse_icon</div>
                </li>
            
                <li>
                <i class="icon vip-icon vip-watermelon_icon"></i>
                    <div class="name">watermelon_icon</div>
                    <div class="fontclass">.vip-watermelon_icon</div>
                </li>
            
                <li>
                <i class="icon vip-icon vip-wireframe_icon"></i>
                    <div class="name">wireframe_icon</div>
                    <div class="fontclass">.vip-wireframe_icon</div>
                </li>
            
                <li>
                <i class="icon vip-icon vip-word_files_icon"></i>
                    <div class="name">word_files_icon</div>
                    <div class="fontclass">.vip-word_files_icon</div>
                </li>
            
                <li>
                <i class="icon vip-icon vip-workbench_icon"></i>
                    <div class="name">workbench_icon</div>
                    <div class="fontclass">.vip-workbench_icon</div>
                </li>
            
                <li>
                <i class="icon vip-icon vip-bianji1"></i>
                    <div class="name">编辑</div>
                    <div class="fontclass">.vip-bianji1</div>
                </li>
            
                <li>
                <i class="icon vip-icon vip-anquan"></i>
                    <div class="name">安全</div>
                    <div class="fontclass">.vip-anquan</div>
                </li>
            
                <li>
                <i class="icon vip-icon vip-chexiao"></i>
                    <div class="name">撤销</div>
                    <div class="fontclass">.vip-chexiao</div>
                </li>
            
                <li>
                <i class="icon vip-icon vip-bijiben"></i>
                    <div class="name">笔记本</div>
                    <div class="fontclass">.vip-bijiben</div>
                </li>
            
                <li>
                <i class="icon vip-icon vip-chabei"></i>
                    <div class="name">茶杯</div>
                    <div class="fontclass">.vip-chabei</div>
                </li>
            
                <li>
                <i class="icon vip-icon vip-daifahuo"></i>
                    <div class="name">待发货</div>
                    <div class="fontclass">.vip-daifahuo</div>
                </li>
            
                <li>
                <i class="icon vip-icon vip-daifukuan"></i>
                    <div class="name">待付款</div>
                    <div class="fontclass">.vip-daifukuan</div>
                </li>
            
                <li>
                <i class="icon vip-icon vip-daishouhuo"></i>
                    <div class="name">待收货</div>
                    <div class="fontclass">.vip-daishouhuo</div>
                </li>
            
                <li>
                <i class="icon vip-icon vip-dianzan"></i>
                    <div class="name">点赞</div>
                    <div class="fontclass">.vip-dianzan</div>
                </li>
            
                <li>
                <i class="icon vip-icon vip-diannao"></i>
                    <div class="name">电脑</div>
                    <div class="fontclass">.vip-diannao</div>
                </li>
            
                <li>
                <i class="icon vip-icon vip-dianhua"></i>
                    <div class="name">电话</div>
                    <div class="fontclass">.vip-dianhua</div>
                </li>
            
                <li>
                <i class="icon vip-icon vip-dingwei"></i>
                    <div class="name">定位</div>
                    <div class="fontclass">.vip-dingwei</div>
                </li>
            
                <li>
                <i class="icon vip-icon vip-fanhui1"></i>
                    <div class="name">返回</div>
                    <div class="fontclass">.vip-fanhui1</div>
                </li>
            
                <li>
                <i class="icon vip-icon vip-fanhui2"></i>
                    <div class="name">返回2</div>
                    <div class="fontclass">.vip-fanhui2</div>
                </li>
            
                <li>
                <i class="icon vip-icon vip-fenlei"></i>
                    <div class="name">分类</div>
                    <div class="fontclass">.vip-fenlei</div>
                </li>
            
                <li>
                <i class="icon vip-icon vip-fenlei1"></i>
                    <div class="name">分类2</div>
                    <div class="fontclass">.vip-fenlei1</div>
                </li>
            
                <li>
                <i class="icon vip-icon vip-fanxian"></i>
                    <div class="name">返现</div>
                    <div class="fontclass">.vip-fanxian</div>
                </li>
            
                <li>
                <i class="icon vip-icon vip-fenxiang1"></i>
                    <div class="name">分享</div>
                    <div class="fontclass">.vip-fenxiang1</div>
                </li>
            
                <li>
                <i class="icon vip-icon vip-fenxiang2"></i>
                    <div class="name">分享2</div>
                    <div class="fontclass">.vip-fenxiang2</div>
                </li>
            
                <li>
                <i class="icon vip-icon vip-geren"></i>
                    <div class="name">个人</div>
                    <div class="fontclass">.vip-geren</div>
                </li>
            
                <li>
                <i class="icon vip-icon vip-gongjuxiang"></i>
                    <div class="name">工具箱</div>
                    <div class="fontclass">.vip-gongjuxiang</div>
                </li>
            
                <li>
                <i class="icon vip-icon vip-gengduo"></i>
                    <div class="name">更多2</div>
                    <div class="fontclass">.vip-gengduo</div>
                </li>
            
                <li>
                <i class="icon vip-icon vip-gouwu"></i>
                    <div class="name">购物</div>
                    <div class="fontclass">.vip-gouwu</div>
                </li>
            
                <li>
                <i class="icon vip-icon vip-gouwuche"></i>
                    <div class="name">购物车</div>
                    <div class="fontclass">.vip-gouwuche</div>
                </li>
            
                <li>
                <i class="icon vip-icon vip-gengduo1"></i>
                    <div class="name">更多</div>
                    <div class="fontclass">.vip-gengduo1</div>
                </li>
            
                <li>
                <i class="icon vip-icon vip-guanbi1"></i>
                    <div class="name">关闭</div>
                    <div class="fontclass">.vip-guanbi1</div>
                </li>
            
                <li>
                <i class="icon vip-icon vip-guanbi2"></i>
                    <div class="name">关闭2</div>
                    <div class="fontclass">.vip-guanbi2</div>
                </li>
            
                <li>
                <i class="icon vip-icon vip-guanbi3"></i>
                    <div class="name">关闭3</div>
                    <div class="fontclass">.vip-guanbi3</div>
                </li>
            
                <li>
                <i class="icon vip-icon vip-jianshao"></i>
                    <div class="name">减少</div>
                    <div class="fontclass">.vip-jianshao</div>
                </li>
            
                <li>
                <i class="icon vip-icon vip-jianshao1"></i>
                    <div class="name">减少2</div>
                    <div class="fontclass">.vip-jianshao1</div>
                </li>
            
                <li>
                <i class="icon vip-icon vip-kefu"></i>
                    <div class="name">客服</div>
                    <div class="fontclass">.vip-kefu</div>
                </li>
            
                <li>
                <i class="icon vip-icon vip-lianjie"></i>
                    <div class="name">链接</div>
                    <div class="fontclass">.vip-lianjie</div>
                </li>
            
                <li>
                <i class="icon vip-icon vip-jishi"></i>
                    <div class="name">计时</div>
                    <div class="fontclass">.vip-jishi</div>
                </li>
            
                <li>
                <i class="icon vip-icon vip-liwu"></i>
                    <div class="name">礼物</div>
                    <div class="fontclass">.vip-liwu</div>
                </li>
            
                <li>
                <i class="icon vip-icon vip-liebiao1"></i>
                    <div class="name">列表2</div>
                    <div class="fontclass">.vip-liebiao1</div>
                </li>
            
                <li>
                <i class="icon vip-icon vip-paihang"></i>
                    <div class="name">排行</div>
                    <div class="fontclass">.vip-paihang</div>
                </li>
            
                <li>
                <i class="icon vip-icon vip-liebiao2"></i>
                    <div class="name">列表</div>
                    <div class="fontclass">.vip-liebiao2</div>
                </li>
            
                <li>
                <i class="icon vip-icon vip-remen"></i>
                    <div class="name">热门</div>
                    <div class="fontclass">.vip-remen</div>
                </li>
            
                <li>
                <i class="icon vip-icon vip-shanchu1"></i>
                    <div class="name">删除</div>
                    <div class="fontclass">.vip-shanchu1</div>
                </li>
            
                <li>
                <i class="icon vip-icon vip-shangchuan"></i>
                    <div class="name">上传</div>
                    <div class="fontclass">.vip-shangchuan</div>
                </li>
            
                <li>
                <i class="icon vip-icon vip-rili"></i>
                    <div class="name">日历</div>
                    <div class="fontclass">.vip-rili</div>
                </li>
            
                <li>
                <i class="icon vip-icon vip-shangyibu"></i>
                    <div class="name">上一步</div>
                    <div class="fontclass">.vip-shangyibu</div>
                </li>
            
                <li>
                <i class="icon vip-icon vip-shoucang1"></i>
                    <div class="name">收藏2</div>
                    <div class="fontclass">.vip-shoucang1</div>
                </li>
            
                <li>
                <i class="icon vip-icon vip-shezhi1"></i>
                    <div class="name">设置</div>
                    <div class="fontclass">.vip-shezhi1</div>
                </li>
            
                <li>
                <i class="icon vip-icon vip-shoucang2"></i>
                    <div class="name">收藏</div>
                    <div class="fontclass">.vip-shoucang2</div>
                </li>
            
                <li>
                <i class="icon vip-icon vip-shipin1"></i>
                    <div class="name">视频</div>
                    <div class="fontclass">.vip-shipin1</div>
                </li>
            
                <li>
                <i class="icon vip-icon vip-shouji"></i>
                    <div class="name">手机</div>
                    <div class="fontclass">.vip-shouji</div>
                </li>
            
                <li>
                <i class="icon vip-icon vip-shu"></i>
                    <div class="name">书</div>
                    <div class="fontclass">.vip-shu</div>
                </li>
            
                <li>
                <i class="icon vip-icon vip-sousuo"></i>
                    <div class="name">搜索</div>
                    <div class="fontclass">.vip-sousuo</div>
                </li>
            
                <li>
                <i class="icon vip-icon vip-tishi3"></i>
                    <div class="name">提示</div>
                    <div class="fontclass">.vip-tishi3</div>
                </li>
            
                <li>
                <i class="icon vip-icon vip-suo"></i>
                    <div class="name">锁</div>
                    <div class="fontclass">.vip-suo</div>
                </li>
            
                <li>
                <i class="icon vip-icon vip-tianqi"></i>
                    <div class="name">天气</div>
                    <div class="fontclass">.vip-tianqi</div>
                </li>
            
                <li>
                <i class="icon vip-icon vip-tianjia1"></i>
                    <div class="name">添加2</div>
                    <div class="fontclass">.vip-tianjia1</div>
                </li>
            
                <li>
                <i class="icon vip-icon vip-tongzhi"></i>
                    <div class="name">通知</div>
                    <div class="fontclass">.vip-tongzhi</div>
                </li>
            
                <li>
                <i class="icon vip-icon vip-tuikuan"></i>
                    <div class="name">退款</div>
                    <div class="fontclass">.vip-tuikuan</div>
                </li>
            
                <li>
                <i class="icon vip-icon vip-wenjian1"></i>
                    <div class="name">文件</div>
                    <div class="fontclass">.vip-wenjian1</div>
                </li>
            
                <li>
                <i class="icon vip-icon vip-tuandui"></i>
                    <div class="name">团队</div>
                    <div class="fontclass">.vip-tuandui</div>
                </li>
            
                <li>
                <i class="icon vip-icon vip-tongzhi1"></i>
                    <div class="name">通知2</div>
                    <div class="fontclass">.vip-tongzhi1</div>
                </li>
            
                <li>
                <i class="icon vip-icon vip-tianjia2"></i>
                    <div class="name">添加</div>
                    <div class="fontclass">.vip-tianjia2</div>
                </li>
            
                <li>
                <i class="icon vip-icon vip-wenjian2"></i>
                    <div class="name">文件2</div>
                    <div class="fontclass">.vip-wenjian2</div>
                </li>
            
                <li>
                <i class="icon vip-icon vip-wenzhang"></i>
                    <div class="name">文章</div>
                    <div class="fontclass">.vip-wenzhang</div>
                </li>
            
                <li>
                <i class="icon vip-icon vip-wenti"></i>
                    <div class="name">问题</div>
                    <div class="fontclass">.vip-wenti</div>
                </li>
            
                <li>
                <i class="icon vip-icon vip-xiazai"></i>
                    <div class="name">下载</div>
                    <div class="fontclass">.vip-xiazai</div>
                </li>
            
                <li>
                <i class="icon vip-icon vip-wenti1"></i>
                    <div class="name">问题2</div>
                    <div class="fontclass">.vip-wenti1</div>
                </li>
            
                <li>
                <i class="icon vip-icon vip-xiangji"></i>
                    <div class="name">相机</div>
                    <div class="fontclass">.vip-xiangji</div>
                </li>
            
                <li>
                <i class="icon vip-icon vip-xiaoxi"></i>
                    <div class="name">消息</div>
                    <div class="fontclass">.vip-xiaoxi</div>
                </li>
            
                <li>
                <i class="icon vip-icon vip-xiaoxi1"></i>
                    <div class="name">消息2</div>
                    <div class="fontclass">.vip-xiaoxi1</div>
                </li>
            
                <li>
                <i class="icon vip-icon vip-xinfeng"></i>
                    <div class="name">信封</div>
                    <div class="fontclass">.vip-xinfeng</div>
                </li>
            
                <li>
                <i class="icon vip-icon vip-xinxi"></i>
                    <div class="name">信息</div>
                    <div class="fontclass">.vip-xinxi</div>
                </li>
            
                <li>
                <i class="icon vip-icon vip-xunhuan"></i>
                    <div class="name">循环</div>
                    <div class="fontclass">.vip-xunhuan</div>
                </li>
            
                <li>
                <i class="icon vip-icon vip-yinle"></i>
                    <div class="name">音乐</div>
                    <div class="fontclass">.vip-yinle</div>
                </li>
            
                <li>
                <i class="icon vip-icon vip-yinliang"></i>
                    <div class="name">音量</div>
                    <div class="fontclass">.vip-yinliang</div>
                </li>
            
                <li>
                <i class="icon vip-icon vip-zhangdan"></i>
                    <div class="name">账单</div>
                    <div class="fontclass">.vip-zhangdan</div>
                </li>
            
                <li>
                <i class="icon vip-icon vip-youhuiquan"></i>
                    <div class="name">优惠券2</div>
                    <div class="fontclass">.vip-youhuiquan</div>
                </li>
            
                <li>
                <i class="icon vip-icon vip-zhaopian"></i>
                    <div class="name">照片</div>
                    <div class="fontclass">.vip-zhaopian</div>
                </li>
            
                <li>
                <i class="icon vip-icon vip-zhengque"></i>
                    <div class="name">正确</div>
                    <div class="fontclass">.vip-zhengque</div>
                </li>
            
                <li>
                <i class="icon vip-icon vip-youhuiquan1"></i>
                    <div class="name">优惠券</div>
                    <div class="fontclass">.vip-youhuiquan1</div>
                </li>
            
                <li>
                <i class="icon vip-icon vip-zhengque1"></i>
                    <div class="name">正确2</div>
                    <div class="fontclass">.vip-zhengque1</div>
                </li>
            
                <li>
                <i class="icon vip-icon vip-zhuye"></i>
                    <div class="name">主页</div>
                    <div class="fontclass">.vip-zhuye</div>
                </li>
            
                <li>
                <i class="icon vip-icon vip-wenjian"></i>
                    <div class="name">文件</div>
                    <div class="fontclass">.vip-wenjian</div>
                </li>
            
                <li>
                <i class="icon vip-icon vip-wenjianjia"></i>
                    <div class="name">文件夹</div>
                    <div class="fontclass">.vip-wenjianjia</div>
                </li>
            
                <li>
                <i class="icon vip-icon vip-xinwenjianjia"></i>
                    <div class="name">新文件夹</div>
                    <div class="fontclass">.vip-xinwenjianjia</div>
                </li>
            
                <li>
                <i class="icon vip-icon vip-kaiwenjianjia"></i>
                    <div class="name">开文件夹</div>
                    <div class="fontclass">.vip-kaiwenjianjia</div>
                </li>
            
                <li>
                <i class="icon vip-icon vip-liebiao"></i>
                    <div class="name">列表</div>
                    <div class="fontclass">.vip-liebiao</div>
                </li>
            
                <li>
                <i class="icon vip-icon vip-fanli"></i>
                    <div class="name">范例</div>
                    <div class="fontclass">.vip-fanli</div>
                </li>
            
                <li>
                <i class="icon vip-icon vip-moban"></i>
                    <div class="name">模版</div>
                    <div class="fontclass">.vip-moban</div>
                </li>
            
                <li>
                <i class="icon vip-icon vip-yewu"></i>
                    <div class="name">业务</div>
                    <div class="fontclass">.vip-yewu</div>
                </li>
            
                <li>
                <i class="icon vip-icon vip-jihe"></i>
                    <div class="name">集合</div>
                    <div class="fontclass">.vip-jihe</div>
                </li>
            
                <li>
                <i class="icon vip-icon vip-kejian"></i>
                    <div class="name">可见</div>
                    <div class="fontclass">.vip-kejian</div>
                </li>
            
                <li>
                <i class="icon vip-icon vip-guanlian"></i>
                    <div class="name">关联</div>
                    <div class="fontclass">.vip-guanlian</div>
                </li>
            
                <li>
                <i class="icon vip-icon vip-shuju"></i>
                    <div class="name">数据</div>
                    <div class="fontclass">.vip-shuju</div>
                </li>
            
                <li>
                <i class="icon vip-icon vip-xinshuju"></i>
                    <div class="name">新数据</div>
                    <div class="fontclass">.vip-xinshuju</div>
                </li>
            
                <li>
                <i class="icon vip-icon vip-xinjianwenjian"></i>
                    <div class="name">新建文件</div>
                    <div class="fontclass">.vip-xinjianwenjian</div>
                </li>
            
                <li>
                <i class="icon vip-icon vip-wenjianleixing"></i>
                    <div class="name">文件类型</div>
                    <div class="fontclass">.vip-wenjianleixing</div>
                </li>
            
                <li>
                <i class="icon vip-icon vip-yuncunchu"></i>
                    <div class="name">云存储</div>
                    <div class="fontclass">.vip-yuncunchu</div>
                </li>
            
                <li>
                <i class="icon vip-icon vip-rizhi"></i>
                    <div class="name">日志</div>
                    <div class="fontclass">.vip-rizhi</div>
                </li>
            
                <li>
                <i class="icon vip-icon vip-bukejian"></i>
                    <div class="name">不可见</div>
                    <div class="fontclass">.vip-bukejian</div>
                </li>
            
                <li>
                <i class="icon vip-icon vip-fabu"></i>
                    <div class="name">发布</div>
                    <div class="fontclass">.vip-fabu</div>
                </li>
            
                <li>
                <i class="icon vip-icon vip-yujing"></i>
                    <div class="name">预警</div>
                    <div class="fontclass">.vip-yujing</div>
                </li>
            
                <li>
                <i class="icon vip-icon vip-yulan"></i>
                    <div class="name">预览</div>
                    <div class="fontclass">.vip-yulan</div>
                </li>
            
                <li>
                <i class="icon vip-icon vip-xianshang"></i>
                    <div class="name">线上</div>
                    <div class="fontclass">.vip-xianshang</div>
                </li>
            
                <li>
                <i class="icon vip-icon vip-ceshi"></i>
                    <div class="name">测试</div>
                    <div class="fontclass">.vip-ceshi</div>
                </li>
            
                <li>
                <i class="icon vip-icon vip-zanting"></i>
                    <div class="name">暂停</div>
                    <div class="fontclass">.vip-zanting</div>
                </li>
            
                <li>
                <i class="icon vip-icon vip-tingzhi"></i>
                    <div class="name">停止</div>
                    <div class="fontclass">.vip-tingzhi</div>
                </li>
            
                <li>
                <i class="icon vip-icon vip-bofang"></i>
                    <div class="name">播放</div>
                    <div class="fontclass">.vip-bofang</div>
                </li>
            
                <li>
                <i class="icon vip-icon vip-xinyonghu"></i>
                    <div class="name">新用户</div>
                    <div class="fontclass">.vip-xinyonghu</div>
                </li>
            
                <li>
                <i class="icon vip-icon vip-yonghu"></i>
                    <div class="name">用户</div>
                    <div class="fontclass">.vip-yonghu</div>
                </li>
            
                <li>
                <i class="icon vip-icon vip-yonghubianji"></i>
                    <div class="name">用户编辑</div>
                    <div class="fontclass">.vip-yonghubianji</div>
                </li>
            
                <li>
                <i class="icon vip-icon vip-baocun"></i>
                    <div class="name">保存</div>
                    <div class="fontclass">.vip-baocun</div>
                </li>
            
                <li>
                <i class="icon vip-icon vip-shezhi"></i>
                    <div class="name">设置</div>
                    <div class="fontclass">.vip-shezhi</div>
                </li>
            
                <li>
                <i class="icon vip-icon vip-bianji"></i>
                    <div class="name">编辑</div>
                    <div class="fontclass">.vip-bianji</div>
                </li>
            
                <li>
                <i class="icon vip-icon vip-shanchu"></i>
                    <div class="name">删除</div>
                    <div class="fontclass">.vip-shanchu</div>
                </li>
            
                <li>
                <i class="icon vip-icon vip-guanbi"></i>
                    <div class="name">关闭</div>
                    <div class="fontclass">.vip-guanbi</div>
                </li>
            
                <li>
                <i class="icon vip-icon vip-niantie"></i>
                    <div class="name">粘贴</div>
                    <div class="fontclass">.vip-niantie</div>
                </li>
            
                <li>
                <i class="icon vip-icon vip-fuzhi"></i>
                    <div class="name">复制</div>
                    <div class="fontclass">.vip-fuzhi</div>
                </li>
            
                <li>
                <i class="icon vip-icon vip-tuichu"></i>
                    <div class="name">退出</div>
                    <div class="fontclass">.vip-tuichu</div>
                </li>
            
                <li>
                <i class="icon vip-icon vip-xufei"></i>
                    <div class="name">续费</div>
                    <div class="fontclass">.vip-xufei</div>
                </li>
            
                <li>
                <i class="icon vip-icon vip-lingcunwei"></i>
                    <div class="name">另存为</div>
                    <div class="fontclass">.vip-lingcunwei</div>
                </li>
            
                <li>
                <i class="icon vip-icon vip-tianjia"></i>
                    <div class="name">添加</div>
                    <div class="fontclass">.vip-tianjia</div>
                </li>
            
                <li>
                <i class="icon vip-icon vip-shoujijiebang"></i>
                    <div class="name">手机解绑</div>
                    <div class="fontclass">.vip-shoujijiebang</div>
                </li>
            
                <li>
                <i class="icon vip-icon vip-shoujibangding"></i>
                    <div class="name">手机绑定</div>
                    <div class="fontclass">.vip-shoujibangding</div>
                </li>
            
                <li>
                <i class="icon vip-icon vip-beian"></i>
                    <div class="name">备案</div>
                    <div class="fontclass">.vip-beian</div>
                </li>
            
                <li>
                <i class="icon vip-icon vip-shouye"></i>
                    <div class="name">首页</div>
                    <div class="fontclass">.vip-shouye</div>
                </li>
            
                <li>
                <i class="icon vip-icon vip-jianqie"></i>
                    <div class="name">剪切</div>
                    <div class="fontclass">.vip-jianqie</div>
                </li>
            
                <li>
                <i class="icon vip-icon vip-fangdajing"></i>
                    <div class="name">放大镜</div>
                    <div class="fontclass">.vip-fangdajing</div>
                </li>
            
                <li>
                <i class="icon vip-icon vip-fangda"></i>
                    <div class="name">放大</div>
                    <div class="fontclass">.vip-fangda</div>
                </li>
            
                <li>
                <i class="icon vip-icon vip-daochu"></i>
                    <div class="name">导出</div>
                    <div class="fontclass">.vip-daochu</div>
                </li>
            
                <li>
                <i class="icon vip-icon vip-daoru"></i>
                    <div class="name">导入</div>
                    <div class="fontclass">.vip-daoru</div>
                </li>
            
                <li>
                <i class="icon vip-icon vip-shijian"></i>
                    <div class="name">时间</div>
                    <div class="fontclass">.vip-shijian</div>
                </li>
            
                <li>
                <i class="icon vip-icon vip-riqi"></i>
                    <div class="name">日期</div>
                    <div class="fontclass">.vip-riqi</div>
                </li>
            
                <li>
                <i class="icon vip-icon vip-shijianriqi"></i>
                    <div class="name">时间日期</div>
                    <div class="fontclass">.vip-shijianriqi</div>
                </li>
            
                <li>
                <i class="icon vip-icon vip-jiesuo"></i>
                    <div class="name">解锁</div>
                    <div class="fontclass">.vip-jiesuo</div>
                </li>
            
                <li>
                <i class="icon vip-icon vip-suoding"></i>
                    <div class="name">锁定</div>
                    <div class="fontclass">.vip-suoding</div>
                </li>
            
                <li>
                <i class="icon vip-icon vip-fanhui"></i>
                    <div class="name">返回</div>
                    <div class="fontclass">.vip-fanhui</div>
                </li>
            
                <li>
                <i class="icon vip-icon vip-shuaxin"></i>
                    <div class="name">刷新</div>
                    <div class="fontclass">.vip-shuaxin</div>
                </li>
            
                <li>
                <i class="icon vip-icon vip-yidong"></i>
                    <div class="name">移动</div>
                    <div class="fontclass">.vip-yidong</div>
                </li>
            
                <li>
                <i class="icon vip-icon vip-shaixuan"></i>
                    <div class="name">筛选</div>
                    <div class="fontclass">.vip-shaixuan</div>
                </li>
            
                <li>
                <i class="icon vip-icon vip-anzhuangbao"></i>
                    <div class="name">安装包</div>
                    <div class="fontclass">.vip-anzhuangbao</div>
                </li>
            
                <li>
                <i class="icon vip-icon vip-fenxiang"></i>
                    <div class="name">分享</div>
                    <div class="fontclass">.vip-fenxiang</div>
                </li>
            
                <li>
                <i class="icon vip-icon vip-xihuan"></i>
                    <div class="name">喜欢</div>
                    <div class="fontclass">.vip-xihuan</div>
                </li>
            
                <li>
                <i class="icon vip-icon vip-shoucang"></i>
                    <div class="name">收藏</div>
                    <div class="fontclass">.vip-shoucang</div>
                </li>
            
                <li>
                <i class="icon vip-icon vip-youjian"></i>
                    <div class="name">邮件</div>
                    <div class="fontclass">.vip-youjian</div>
                </li>
            
                <li>
                <i class="icon vip-icon vip-weizhi"></i>
                    <div class="name">位置</div>
                    <div class="fontclass">.vip-weizhi</div>
                </li>
            
                <li>
                <i class="icon vip-icon vip-shequ"></i>
                    <div class="name">社区</div>
                    <div class="fontclass">.vip-shequ</div>
                </li>
            
                <li>
                <i class="icon vip-icon vip-fankui"></i>
                    <div class="name">反馈</div>
                    <div class="fontclass">.vip-fankui</div>
                </li>
            
                <li>
                <i class="icon vip-icon vip-guanliyuan"></i>
                    <div class="name">管理员</div>
                    <div class="fontclass">.vip-guanliyuan</div>
                </li>
            
                <li>
                <i class="icon vip-icon vip-biaoge"></i>
                    <div class="name">表格</div>
                    <div class="fontclass">.vip-biaoge</div>
                </li>
            
                <li>
                <i class="icon vip-icon vip-yibiaoban"></i>
                    <div class="name">仪表板</div>
                    <div class="fontclass">.vip-yibiaoban</div>
                </li>
            
                <li>
                <i class="icon vip-icon vip-shujubiao"></i>
                    <div class="name">数据表</div>
                    <div class="fontclass">.vip-shujubiao</div>
                </li>
            
                <li>
                <i class="icon vip-icon vip-shujuji"></i>
                    <div class="name">数据集</div>
                    <div class="fontclass">.vip-shujuji</div>
                </li>
            
                <li>
                <i class="icon vip-icon vip-yanshi"></i>
                    <div class="name">演示</div>
                    <div class="fontclass">.vip-yanshi</div>
                </li>
            
                <li>
                <i class="icon vip-icon vip-zhuzhuangtu"></i>
                    <div class="name">柱状图</div>
                    <div class="fontclass">.vip-zhuzhuangtu</div>
                </li>
            
                <li>
                <i class="icon vip-icon vip-zhexiantu"></i>
                    <div class="name">折线图</div>
                    <div class="fontclass">.vip-zhexiantu</div>
                </li>
            
                <li>
                <i class="icon vip-icon vip-sandiantu"></i>
                    <div class="name">散点图</div>
                    <div class="fontclass">.vip-sandiantu</div>
                </li>
            
                <li>
                <i class="icon vip-icon vip-dabingtu"></i>
                    <div class="name">大饼图</div>
                    <div class="fontclass">.vip-dabingtu</div>
                </li>
            
                <li>
                <i class="icon vip-icon vip-ditu"></i>
                    <div class="name">地图</div>
                    <div class="fontclass">.vip-ditu</div>
                </li>
            
                <li>
                <i class="icon vip-icon vip-guanxitu"></i>
                    <div class="name">关系图</div>
                    <div class="fontclass">.vip-guanxitu</div>
                </li>
            
                <li>
                <i class="icon vip-icon vip-tuceng"></i>
                    <div class="name">图层</div>
                    <div class="fontclass">.vip-tuceng</div>
                </li>
            
                <li>
                <i class="icon vip-icon vip-sheji"></i>
                    <div class="name">设计</div>
                    <div class="fontclass">.vip-sheji</div>
                </li>
            
                <li>
                <i class="icon vip-icon vip-zuoduiqi"></i>
                    <div class="name">左对齐</div>
                    <div class="fontclass">.vip-zuoduiqi</div>
                </li>
            
                <li>
                <i class="icon vip-icon vip-youduiqi"></i>
                    <div class="name">右对齐</div>
                    <div class="fontclass">.vip-youduiqi</div>
                </li>
            
                <li>
                <i class="icon vip-icon vip-shangduiqi"></i>
                    <div class="name">上对齐</div>
                    <div class="fontclass">.vip-shangduiqi</div>
                </li>
            
                <li>
                <i class="icon vip-icon vip-xiaduiqi"></i>
                    <div class="name">下对齐</div>
                    <div class="fontclass">.vip-xiaduiqi</div>
                </li>
            
                <li>
                <i class="icon vip-icon vip-chuizhijuzhong"></i>
                    <div class="name">垂直居中</div>
                    <div class="fontclass">.vip-chuizhijuzhong</div>
                </li>
            
                <li>
                <i class="icon vip-icon vip-shuipingjuzhong"></i>
                    <div class="name">水平居中</div>
                    <div class="fontclass">.vip-shuipingjuzhong</div>
                </li>
            
                <li>
                <i class="icon vip-icon vip-hengxiangpingfen"></i>
                    <div class="name">横向平分</div>
                    <div class="fontclass">.vip-hengxiangpingfen</div>
                </li>
            
                <li>
                <i class="icon vip-icon vip-zongxiangpingfen"></i>
                    <div class="name">纵向平分</div>
                    <div class="fontclass">.vip-zongxiangpingfen</div>
                </li>
            
                <li>
                <i class="icon vip-icon vip-shangyiyiceng"></i>
                    <div class="name">上移一层</div>
                    <div class="fontclass">.vip-shangyiyiceng</div>
                </li>
            
                <li>
                <i class="icon vip-icon vip-xiayiyiceng"></i>
                    <div class="name">下移一层</div>
                    <div class="fontclass">.vip-xiayiyiceng</div>
                </li>
            
                <li>
                <i class="icon vip-icon vip-diceng"></i>
                    <div class="name">底层</div>
                    <div class="fontclass">.vip-diceng</div>
                </li>
            
                <li>
                <i class="icon vip-icon vip-dingceng"></i>
                    <div class="name">顶层</div>
                    <div class="fontclass">.vip-dingceng</div>
                </li>
            
                <li>
                <i class="icon vip-icon vip-yingwen"></i>
                    <div class="name">英文</div>
                    <div class="fontclass">.vip-yingwen</div>
                </li>
            
                <li>
                <i class="icon vip-icon vip-zhongwen"></i>
                    <div class="name">中文</div>
                    <div class="fontclass">.vip-zhongwen</div>
                </li>
            
                <li>
                <i class="icon vip-icon vip-loading"></i>
                    <div class="name">loading</div>
                    <div class="fontclass">.vip-loading</div>
                </li>
            
                <li>
                <i class="icon vip-icon vip-dui"></i>
                    <div class="name">对</div>
                    <div class="fontclass">.vip-dui</div>
                </li>
            
                <li>
                <i class="icon vip-icon vip-cuo"></i>
                    <div class="name">错</div>
                    <div class="fontclass">.vip-cuo</div>
                </li>
            
                <li>
                <i class="icon vip-icon vip-gantanhao"></i>
                    <div class="name">感叹号</div>
                    <div class="fontclass">.vip-gantanhao</div>
                </li>
            
                <li>
                <i class="icon vip-icon vip-wenhao"></i>
                    <div class="name">问号</div>
                    <div class="fontclass">.vip-wenhao</div>
                </li>
            
                <li>
                <i class="icon vip-icon vip-tishi"></i>
                    <div class="name">提示1</div>
                    <div class="fontclass">.vip-tishi</div>
                </li>
            
                <li>
                <i class="icon vip-icon vip-huigun"></i>
                    <div class="name">回滚</div>
                    <div class="fontclass">.vip-huigun</div>
                </li>
            
                <li>
                <i class="icon vip-icon vip-miyue"></i>
                    <div class="name">密钥</div>
                    <div class="fontclass">.vip-miyue</div>
                </li>
            
                <li>
                <i class="icon vip-icon vip-qizi"></i>
                    <div class="name">旗子</div>
                    <div class="fontclass">.vip-qizi</div>
                </li>
            
                <li>
                <i class="icon vip-icon vip-tuding"></i>
                    <div class="name">图钉</div>
                    <div class="fontclass">.vip-tuding</div>
                </li>
            
                <li>
                <i class="icon vip-icon vip-yunshangchuan"></i>
                    <div class="name">云上传</div>
                    <div class="fontclass">.vip-yunshangchuan</div>
                </li>
            
                <li>
                <i class="icon vip-icon vip-yunxiazai"></i>
                    <div class="name">云下载</div>
                    <div class="fontclass">.vip-yunxiazai</div>
                </li>
            
                <li>
                <i class="icon vip-icon vip-liebiaozhankai"></i>
                    <div class="name">列表展开</div>
                    <div class="fontclass">.vip-liebiaozhankai</div>
                </li>
            
                <li>
                <i class="icon vip-icon vip-fanhuijiuban"></i>
                    <div class="name">返回旧版</div>
                    <div class="fontclass">.vip-fanhuijiuban</div>
                </li>
            
                <li>
                <i class="icon vip-icon vip-xinshouyindao"></i>
                    <div class="name">新手引导</div>
                    <div class="fontclass">.vip-xinshouyindao</div>
                </li>
            
                <li>
                <i class="icon vip-icon vip-ermai"></i>
                    <div class="name">耳麦</div>
                    <div class="fontclass">.vip-ermai</div>
                </li>
            
                <li>
                <i class="icon vip-icon vip-liebiaoshouqi"></i>
                    <div class="name">列表收起</div>
                    <div class="fontclass">.vip-liebiaoshouqi</div>
                </li>
            
                <li>
                <i class="icon vip-icon vip-zixun"></i>
                    <div class="name">资讯</div>
                    <div class="fontclass">.vip-zixun</div>
                </li>
            
                <li>
                <i class="icon vip-icon vip-dianyuan"></i>
                    <div class="name">电源</div>
                    <div class="fontclass">.vip-dianyuan</div>
                </li>
            
                <li>
                <i class="icon vip-icon vip-chuanshu"></i>
                    <div class="name">传输</div>
                    <div class="fontclass">.vip-chuanshu</div>
                </li>
            
                <li>
                <i class="icon vip-icon vip-kaifa"></i>
                    <div class="name">开发</div>
                    <div class="fontclass">.vip-kaifa</div>
                </li>
            
                <li>
                <i class="icon vip-icon vip-dengpao"></i>
                    <div class="name">灯泡</div>
                    <div class="fontclass">.vip-dengpao</div>
                </li>
            
                <li>
                <i class="icon vip-icon vip-peizhi"></i>
                    <div class="name">配置</div>
                    <div class="fontclass">.vip-peizhi</div>
                </li>
            
                <li>
                <i class="icon vip-icon vip-zaixian"></i>
                    <div class="name">在线</div>
                    <div class="fontclass">.vip-zaixian</div>
                </li>
            
                <li>
                <i class="icon vip-icon vip-zhibiao"></i>
                    <div class="name">指标</div>
                    <div class="fontclass">.vip-zhibiao</div>
                </li>
            
                <li>
                <i class="icon vip-icon vip-chongzi"></i>
                    <div class="name">虫子</div>
                    <div class="fontclass">.vip-chongzi</div>
                </li>
            
                <li>
                <i class="icon vip-icon vip-API"></i>
                    <div class="name">API</div>
                    <div class="fontclass">.vip-API</div>
                </li>
            
                <li>
                <i class="icon vip-icon vip-A-B"></i>
                    <div class="name">A-B</div>
                    <div class="fontclass">.vip-A-B</div>
                </li>
            
                <li>
                <i class="icon vip-icon vip-jiekou"></i>
                    <div class="name">接口</div>
                    <div class="fontclass">.vip-jiekou</div>
                </li>
            
                <li>
                <i class="icon vip-icon vip-zongtu"></i>
                    <div class="name">总图</div>
                    <div class="fontclass">.vip-zongtu</div>
                </li>
            
                <li>
                <i class="icon vip-icon vip-xiazuan"></i>
                    <div class="name">下钻</div>
                    <div class="fontclass">.vip-xiazuan</div>
                </li>
            
                <li>
                <i class="icon vip-icon vip-dingyue"></i>
                    <div class="name">订阅</div>
                    <div class="fontclass">.vip-dingyue</div>
                </li>
            
                <li>
                <i class="icon vip-icon vip-chaxun"></i>
                    <div class="name">查询</div>
                    <div class="fontclass">.vip-chaxun</div>
                </li>
            
                <li>
                <i class="icon vip-icon vip-qingxi"></i>
                    <div class="name">清洗</div>
                    <div class="fontclass">.vip-qingxi</div>
                </li>
            
                <li>
                <i class="icon vip-icon vip-jiankong"></i>
                    <div class="name">监控</div>
                    <div class="fontclass">.vip-jiankong</div>
                </li>
            
                <li>
                <i class="icon vip-icon vip-shipin"></i>
                    <div class="name">视频</div>
                    <div class="fontclass">.vip-shipin</div>
                </li>
            
                <li>
                <i class="icon vip-icon vip-guolv"></i>
                    <div class="name">过滤</div>
                    <div class="fontclass">.vip-guolv</div>
                </li>
            
                <li>
                <i class="icon vip-icon vip-zhangai"></i>
                    <div class="name">障碍</div>
                    <div class="fontclass">.vip-zhangai</div>
                </li>
            
                <li>
                <i class="icon vip-icon vip-tishi2"></i>
                    <div class="name">提示2</div>
                    <div class="fontclass">.vip-tishi2</div>
                </li>
            
                <li>
                <i class="icon vip-icon vip-saomiao"></i>
                    <div class="name">扫描</div>
                    <div class="fontclass">.vip-saomiao</div>
                </li>
            
        </ul>

        <h2 id="font-class-">font-class引用</h2>
        <hr>

        <p>font-class是unicode使用方式的一种变种，主要是解决unicode书写不直观，语意不明确的问题。</p>
        <p>与unicode使用方式相比，具有如下特点：</p>
        <ul>
        <li>兼容性良好，支持ie8+，及所有现代浏览器。</li>
        <li>相比于unicode语意明确，书写更直观。可以很容易分辨这个icon是什么。</li>
        <li>因为使用class来定义图标，所以当要替换图标时，只需要修改class里面的unicode引用。</li>
        <li>不过因为本质上还是使用的字体，所以多色图标还是不支持的。</li>
        </ul>
        <p>使用步骤如下：</p>
        <h3 id="-fontclass-">第一步：引入项目下面生成的fontclass代码：</h3>


        <pre><code class="lang-js hljs javascript"><span class="hljs-comment">&lt;link rel="stylesheet" type="text/css" href="./iconfont.css"&gt;</span></code></pre>
        <h3 id="-">第二步：挑选相应图标并获取类名，应用于页面：</h3>
        <pre><code class="lang-css hljs">&lt;<span class="hljs-selector-tag">i</span> <span class="hljs-selector-tag">class</span>="<span class="hljs-selector-tag">vip-icon</span> <span class="hljs-selector-tag">vip-xxx</span>"&gt;&lt;/<span class="hljs-selector-tag">i</span>&gt;</code></pre>
        <blockquote>
        <p>"vip-icon"是你项目下的font-family。可以通过编辑项目查看，默认是"iconfont"。</p>
        </blockquote>
    </div>
</body>
</html>
